<template>
    <div class="page">
        <!-- 添加设置按钮 -->
        <div class="settings-btn" @click="handleSettings">
            <img src="@/assets/images/mine/userSetting.png" alt="settings">
        </div>

        <!-- 用户信息区域 -->
        <div class="user-info" @click="handleLoginClick">
            <div class="avatar-container">
                <img :src="userStore.userInfo.avatar || '/src/assets/images/mine/defaultAvatar.png'" class="avatar">
            </div>
            <div class="user-details">
                <span class="username">{{ isLoggedIn ? userStore.userInfo.username : '请登录' }}</span>
                <span class="email">邮箱: {{ isLoggedIn ? userStore.userInfo.email : '暂无邮箱' }}</span>
                <span class="major">专业: {{ isLoggedIn ? userStore.userInfo.majorName : '暂无专业' }}</span>
            </div>
        </div>

        <!-- 功能列表区域 -->
        <div class="content">
            <div class="menu-list">
                <div class="menu-item" @click="handleEdit">
                    <img src="@/assets/images/mine/interviewRecord.png" />
                    <span> 面试记录</span>
                </div>
                <div class="menu-item" @click="handlePets">
                    <img src="@/assets/images/mine/behaviorAnalysis.png" />
                    <span> 用户行为分析</span>
                </div>
                <div class="menu-item" @click="handleFavorites">
                    <img src="@/assets/images/mine/ResumeUpload.png" />
                    <span> 简历上传</span>
                </div>
                <div class="menu-item" @click="showContactDialog">
                    <img src="@/assets/images/mine/myMessage.png" />
                    <span> 我的信息</span>
                </div>
                <div class="menu-item" @click="handleLogout">
                    <img src="@/assets/images/mine/log-out.png" />
                    <span> 退出登录</span>
                </div>
            </div>
        </div>
        <TabNav />


    </div>
</template>

<script setup>
defineOptions({
    name: 'MineIndex'
})

import TabNav from '@/components/TabNav/TabNav.vue'
import { useUserStore } from "@/stores/user";
import { useRouter } from 'vue-router';
import { ref, computed, watch } from 'vue';

const router = useRouter();
const userStore = useUserStore();

// 添加计算属性判断登录状态
const isLoggedIn = computed(() => {
    return !!userStore.token;
});

//面试记录
const handleEdit = () => {
    console.log('面试记录');
}

//用户行为分析
const handlePets = () => {
    console.log('用户行为分析');
}

//简历上传
const handleFavorites = () => {
    console.log('简历上传');
}

//退出登录
const handleLogout = () => {
    userStore.clearUserInfo();
    router.push('/login');
}

//我的信息
const showContactDialog = () => {
    console.log('我的信息');
}

const handleLoginClick = () => {
    if (!isLoggedIn.value) {
        router.push('/login')
    }
}

// 添加设置按钮处理函数
const handleSettings = () => {
    // 跳转到用户设置页面
}

// 添加一个监听器来调试数据
watch(() => userStore.userInfo, (newVal) => {
    console.log('用户信息更新:', newVal)
}, { deep: true })

watch(() => userStore.token, (newVal) => {
    console.log('token更新:', newVal)
})
</script>

<style lang="scss" scoped>
.page {
    background-image: url('@/assets/images/mine/bg.png');
    width: 100%;
    height: 100vh;
    position: relative;

    .settings-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 10;
        cursor: pointer;
        padding: 8px;

        img {
            width: 24px;
            height: 24px;
            filter: brightness(0) invert(1); // 将图标改为白色
            transition: transform 0.3s ease;
        }
    }

    .user-info {
        padding: 20px 20px;
        padding-bottom: 60px;
        display: flex;
        align-items: center;
        gap: 20px;
        cursor: pointer;

        .avatar-container {
            cursor: pointer;

            .avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 2px solid #fff;
                object-fit: cover;
            }
        }

        .user-details {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .username {
                color: #fff;
                font-size: 26px;
                font-weight: 500;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .email,
            .major {
                color: rgba(255, 255, 255, 0.95);
                font-size: 12px;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                font-weight: 400;
                letter-spacing: 1px;
            }
        }
    }

    .content {
        position: absolute;
        top: 120px;
        width: 100%;
        height: calc(100vh - 120px - 60px);
        background-color: #fff;
        border-radius: 25px 25px 0 0;
        padding: 20px;

        .menu-list {
            padding: 20px 0;

            .menu-item {
                display: flex;
                align-items: center;
                padding: 8px 20px;
                margin-bottom: 10px;
                cursor: pointer;
                border-radius: 12px;
                transition: background-color 0.3s;
                position: relative;

                &:not(:last-child)::after {
                    content: '';
                    position: absolute;
                    bottom: -5px;
                    left: 20px;
                    right: 20px;
                    height: 1px;
                    background: #E5E5E5;
                    border-bottom: 1px dashed #E5E5E5;
                }

                &:hover {
                    background-color: #f5f5f5;
                }

                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 12px;
                }

                span {
                    color: #333;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>